<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"></canvas>
<!--&lt;!&ndash;canvas画图片-->

    <!--1.var img=new Image()-->
    <!--2.img.src="";-->
    <!--3.img.onlosd=function()-{-->
    <!--4.开始画图-->
       <!--ctx.drawImage(图片对象，画的位置X  ，画的位置Y)-->
       <!--ctx.drawImage(图片对象，画的位置X  ，画的位置Y，画多宽，画多高)-->
       <!--ctx.drawImage(图片对象，原图的x坐标，原图的y坐标，原图的宽，原图的高，画的位置X  ，画的位置Y，画多宽，画多高)-->
        <!--}   -->

<script>
    var cas=document.querySelector("canvas");
    var ctx=cas.getContext("2d");
    var img=new Image();
    img.src="img/psb.jpg";
    img.onload=function(){
        ctx.drawImage(img,0,0,400,400);
    }

//开关
    var isDraw=false;
    cas.onmousedown=function(e){
        isDraw=true;
        ctx.beginPath();
    }
    cas.onmousemove=function(e){
        if(!isDraw){
            return
        }
//        ctx.clearRect(e.offsetX, e.offsetY,20,20)
        ctx.lineTo(e.offsetX, e.offsetY)
        ctx.stroke()
    }
    cas.onmouseup=function(e){
        isDraw=false;
    }
    cas.onmouseout=function(e){
        isDraw=false;
    }




</script>
</body>
</html>